<template>
    <div>
        <el-page-header @back="$router.back(-1)" content="编辑车票"></el-page-header>

        <el-form style="margin-top:10px;" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            
            <el-form-item label="车站名称" prop="t_name">
                <el-input v-model="ruleForm.t_name"></el-input>
            </el-form-item>

            <el-form-item label="起始站" prop="t_start_place">
                <el-cascader
                    ref="start_area"
		            :options="options"
		            :change-on-select="true"
		            v-model="ruleForm.t_start_place.id"
		            expand-trigger="hover"
		            @change="startChange" >
	            </el-cascader>
            </el-form-item>

            <el-form-item label="终点站" prop="t_end_place">
                <el-cascader
                    ref="end_area"
	                :options="options"
		            :change-on-select="true"
		            v-model="ruleForm.t_end_place.id"
		            expand-trigger="hover"
		            @change="endChange" >
	            </el-cascader>
            </el-form-item>
            

            <el-form-item label="发车时间" prop="t_time">
                <el-date-picker
                    v-model="ruleForm.t_time"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="坐席">
                <el-button type="primary" @click="addSeat">添加坐席</el-button>
            </el-form-item>

            <el-form-item>
                <el-row style="margin-bottom:10px;" v-for="(v,k) in ruleForm.t_seat" :key="k">
                    <el-col :span="5">
                        <el-input v-model="v.name" placeholder="请输入坐席名称"></el-input>
                    </el-col>

                    <el-col :span="1">
                        　:
                    </el-col>
                    
                    <el-col :span="5">
                        <el-input v-model="v.pric" placeholder="请输入坐席价格"></el-input>
                    </el-col>
                    <el-col :span="1">
                        　元
                    </el-col>

                    <el-col :span="1">
                        　:
                    </el-col>

                    <el-col :span="5">
                        <el-input v-model="v.count" placeholder="请输入坐席数量"></el-input>
                    </el-col>
                    <el-col :span="1">
                        　位
                    </el-col>
                </el-row>
                
            </el-form-item>

            <el-form-item label="车票均价" prop="t_ticket_price">
                <el-row>
                    <el-col :span="6">
                        <el-input v-model="ruleForm.t_ticket_price"></el-input>
                    </el-col>

                    <el-col :span="2">
                        　元
                    </el-col>
                </el-row>
                
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit('ruleForm')"><span v-if="status">提交中<i class="el-icon-loading"></i></span><span v-else>　提交　</span></el-button>
            </el-form-item>


        </el-form>
    </div>
</template>

<style scoped>

</style>

<script>

import area from '../../js/area.js'

export default {
    data(){

        return {
            options: area,
            ruleForm:{
                t_id: null,
                t_name:'',
                t_start_place:{text:[],id:[]},
                t_end_place:{text:[],id:[]},
                t_time:'',
                t_ticket_price:'',
                t_seat:[]
            },
            rules:{
                t_name:[
                    {required:true,message:'请输入车站名称',trigger:'blur'}
                ],
                t_start_place:[
                    {required:true,message:'请选择起始站',trigger:'change'}
                ],
                t_end_place:[
                    {required:true,message:'请选择终点站',trigger:'change'}
                ],
                t_time:[
                    {required:true,message:'请设置发车时间',trigger:'blur'}
                ],
                t_ticket_price:[
                    {required:true,message:'请输入车票均价',trigger:'blur'}
                ],
                
            },
            status: false

        }

    },
    methods:{
        addSeat(){

            this.ruleForm.t_seat.push({name:'',pric:'',count:''})

        },
        startChange(res){
            this.ruleForm.t_start_place.text = this.$refs.start_area.getCheckedNodes()[0].pathLabels

            console.log( this.ruleForm.t_start_place)
        },
        endChange(res){
            this.ruleForm.t_end_place.text = this.$refs.end_area.getCheckedNodes()[0].pathLabels

            console.log( this.ruleForm.t_end_place)
        },
        submit(formName){

            if(this.status){

                return false

            }

            this.$refs[formName].validate((valid) => {

                if (valid) {

                    this.status = true

                    let that = this

                    let data=JSON.stringify(this.ruleForm)

                    data=JSON.parse(data)

                    data.t_time=new Date(data.t_time).getTime()

                    console.log(data.t_time)

                    this.$axios.post('/admin.php/ticket/edit_save',this.$qs.stringify(data)).then( (res) => {

                        that.status = false

                        if(res.data.code==1){

                            that.$message({
                                message:'操作成功~',
                                type:'success'
                            })

                            that.$router.push({path:'/admin/ticket'})

                        }else{

                            that.$message.error(res.data.msg)

                        }

                    } ).catch( (err) => {

                        that.status = false
                        
                        that.$message.error('网络繁忙~')

                    } )

                } else {
                    return false;
                }

            });
        },
        getData(){

            let that = this

            this.$axios.post('/admin.php/ticket/edit',this.$qs.stringify({id:this.ruleForm.t_id})).then( (res) => {

                if(res.data.code==1){

                    res.data.data.t_time*=1000

                    that.ruleForm = res.data.data

                }else{

                    that.$message.error(res.data.msg)

                }

            } ).catch( (err) => {

                that.$message.error('网络繁忙~')

            } )

        }
    },
    created(){
        this.ruleForm.t_id = this.$route.query.id

        if(this.ruleForm.t_id){

            this.getData()
        
        }
    }
}

</script>